<style>
    .nestTable tr{
        border: 1px solid #ddd;
    }
</style>
<table layout:fragment="orderInfos_table" class="table table-striped table-bordered  table-advance table-hover dataTable" id="orderInfos_table" name="orderInfos_table">
	<thead>
		<tr>
            <th>编号</th>
			<th>订单号</th>
			<th>会员名</th>
			<th>下单时间</th>
			<th>订单金额</th>
			<th>支付金额</th>
			<th>订单状态</th>
            <th>操作</th>
            <th style="display: none;"></th>
		</tr>
	</thead>	
	<tbody>
		<tr class="odd gradeX" th:each="data : ${orderInfos}">
            <td th:text="${data.id}">1</td>
			<td th:text="${data.orderNumber}">
				 2014062417559999
			</td>
			<td th:text="${data.username}">
				 
			</td>
			<td th:text="${#calendars.format(data.overbookingTime,'yyyy-MM-dd HH:mm:ss')}">
				 
			</td>
			<td th:text="'￥'+${data.orderAmount}?:0.00">
				 120
			</td>
			<td th:text="${data.paymentAmount}==null?￥0.00:'￥'+${data.paymentAmount}">
				 
			</td>

			<td class="center" th:text="${data.orderStatus.description+','+data.paymentStatus.description+','+data.deliveryStatus.description}">
				 暂无
			</td>
			 <td>
				 <a href="#" th:href="@{'/orderInfo/view/'+${data.id}+'/'+${orderInfos.getNumber()}+'/'+${viewState==''?-1:viewState}}" th:attr="id=${'link_show_'+dataStat.index},name=${'link_show_'+dataStat.index}"  class="btn default btn-xs red-stripe" ><i class="fa fa-view"></i>查看</a>
			</td>
            <td style="display: none;" th:text="*{data.brandType==null?'':data.brandType.description}"></td>
		</tr>
 	</tbody>
</table>
<input type="hidden" id="viewState" th:value="${viewState==''?-1:viewState}" />
<input type="hidden" id="pageNumber" th:value="${orderInfos.getNumber()}"/>
<script th:inline="javascript">
/*<![CDATA[*/
    var initTable = function () {
        var table = $('#orderInfos_table');

        /* Formatting function for row details */
        function fnFormatDetails(oTable, nTr) {
            var aData = oTable.fnGetData(nTr);
            var sOut = '';
            $.ajax({
                url:'/orderInfo/listChilds',
                async:false,
                method:'post',
                data:{parentNumber:aData[2]},
                success:function(data){
                    var page = $('#pageNumber').val();
                    var viewState = $('#viewState').val();
                    //返回的是一个json对象数组
                    sOut += '<table class="table table-bordered nestTable">';
                    sOut += '<thead><tr><th>编号</th><th>订单号</th><th>订单金额</th><th>支付金额</th><th>订单状态</th><th>操作</th></tr></thead><tbody>'
                    for(var i = 0;i<data.length;i++){
                        sOut += '<tr>';
                        sOut += '<th style="border: 1px solid #ddd;">'+data[i].id+'</th>';
                        sOut += '<th style="border: 1px solid #ddd;">'+data[i].orderNumber+'</th>';
                        sOut += '<th style="border: 1px solid #ddd;">'+data[i].orderAmount+'</th>';
                        sOut += '<th style="border: 1px solid #ddd;">'+data[i].paymentAmount+'</th>';
                        sOut += '<th style="border: 1px solid #ddd;">'+data[i].orderState+'</th>';
                        sOut += '<th style="border: 1px solid #ddd;"><a href="'+data[i].operator+'/'+page+'/'+viewState+'" id="link_show_'+data[i].orderNumber+'" name = "link_show_'+data[i].orderNumber+'" class="btn default btn-xs red-stripe"><i class="fa fa-view"></i>查看</a></th>';
                        sOut += '</tr>'
                    }
                    sOut += '</tbody></table>';
                    return sOut;
                }
            });
            return sOut;
        }

        /*
         * Insert a 'details' column to the table
         */
        var nCloneTh = document.createElement('th');
        var nCloneTd = document.createElement('td');
        var nCloneTd2 = document.createElement('td');
        nCloneTd.innerHTML = '<span class="row-details row-details-close"></span>';
        nCloneTd2.innerHTML = '<span style="display: none;" class="row-details row-details-close"></span>';

        $('thead tr', table).each(function () {
            this.insertBefore(nCloneTh, this.childNodes[0]);
        });

        $('tbody tr', table).each(function () {
            if($('td',this)[8].innerHTML){
                this.insertBefore(nCloneTd2.cloneNode(true), this.childNodes[0]);
            }else{
                this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
            }
        });

        /* Add event listener for opening and closing details
         * Note that the indicator for showing which row is open is not controlled by DataTables,
         * rather it is done here
         */
         var oTable = table.dataTable({
             'bPaginate':false,
             'bSort':false,
             'bSortClasses':false,
             'bInfo':false,
             'oLanguage': {
                 'sEmptyTable': '未查到任何记录，请放大查询条件试试'
             },
             'searching':false,
             'bFilter':false
         });
        table.on('click', ' tbody td .row-details', function () {
            var nTr = $(this).parents('tr')[0];
            if (oTable.fnIsOpen(nTr)) {
                /* This row is already open - close it */
                $(this).addClass("row-details-close").removeClass("row-details-open");
                oTable.fnClose(nTr);
            } else {
                console.info('sss');
                /* Open this row */
                $(this).addClass("row-details-open").removeClass("row-details-close");
                oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
            }
        });
    }

    $(document).ready(function(){
        initTable();
    });
/*]]>*/
</script>
<div th:include="page_footer" th:with="viewState=${viewState},url=${'/orderInfo/index'},pageContext=${orderInfos}"></div> 